<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			/* 列表 */
			.mui-table-view-cell {
				display: flex;
			}

			.mui-table-view .circle {
				display: block;
				width: 16px;
				height: 16px;
				margin-top: 2px;
				border: 3px solid #ffbc35;
				border-radius: 50%;
			}

			.mui-table-view .text {
				flex: 1;
				font-size: 14px;
				padding-left: 15px;
				color: #818181;
			}

			.mui-badge {
				color: #000000;
				background-color: transparent;
			}

			/* 预约 */
			#order {
				width: 100%;
				height: auto;
				text-align: center;
				background-color: #FFFFFF;
			}

			.bottom p {
				padding: 5px 10px;
			}

			.bottom .content {
				padding: 0 20px;
				line-height: 30px;
				font-size: 0.875rem;
				display: none;
			}

			.cancelorder {
				text-align: center;
				margin-top: 10px;
			}

			.cancelorder button {
				width: 80%;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<!-- 列表 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">阅览室</span>
				<span class="mui-badge item"></span>
			</li>
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">座位号</span>
				<span class="mui-badge item"></span>
			</li>
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">状态</span>
				<span class="mui-badge item"></span>
			</li>
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">操作时间</span>
				<span class="mui-badge item"></span>
			</li>
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">截至时间</span>
				<span class="mui-badge item"></span>
			</li>
			<li class="mui-table-view-cell">
				<span class="circle"></span>
				<span class="text">备注</span>
				<span class="mui-badge item"></span>
			</li>
			<!-- 预约 -->
			<li class="mui-table-view-cell">
				<div id="order">
					<button type="button" class="mui-btn mui-btn-primary">还没有座位？马上预约一个!</button>
				</div>
			</li>
		</ul>
		<div class="bottom">
			<p>等待签到的预约</p>
			<div class="content">
				<div>
					<span>预约:</span>
					<span class="bottom-item"></span>
				</div>
				<div>
					<span>阅览室:</span>
					<span class="bottom-item"></span>
				</div>
				<div>
					<span>座位号:</span>
					<span class="bottom-item"></span>
				</div>
				<div>
					<span>提交时间:</span>
					<span class="bottom-item"></span>
				</div>
				<div>
					<span>系统备注:</span>
					<span class="bottom-item"></span>
				</div>
				<div class="cancelorder">
					<button type="button" class="mui-btn mui-btn-warning">取消预约</button>
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			// mui.ajax('http://116.63.89.27:83/gxzy.asmx/GetUserNowState', {
			// 	data: {
			// 		'SchoolNo': '20191030',
			// 		'cardNo': '1938060124',
			// 		'isCheckCode': false
			// 	},
			// 	dataType: 'json', //服务器返回json格式数据
			// 	type: 'post', //HTTP请求类型
			// 	timeout: 10000, //超时时间设置为10秒；
			// 	headers: {
			// 		'Content-Type': 'application/json'
			// 	},
			// 	success: function(data) {
			// 		let res = data.d.Result;
			// 		//console.log(res);
			// 		let item = mui('.item');
			// 		let bottom_item = mui('.bottom-item');
			// 		item[0].innerHTML = bottom_item[1].innerHTML = res.InRoom; //阅览室
			// 		item[1].innerHTML = bottom_item[2].innerHTML = res.SeatNum; //座位号
			// 		item[2].innerHTML = res.StatusStr; //状态
			// 		item[3].innerHTML = bottom_item[3].innerHTML = bottom_item[0].innerHTML = res.Time; //操作时间
			// 		item[5].innerHTML = bottom_item[4].innerHTML = res.NowStatusRemark; //备注
			// 		if(res.SeatNum){
			// 			mui('.content')[0].style.display = 'block';
			// 		}else{
			// 			mui('.content')[0].style.display = 'none';
			// 		}
			// 	},
			// 	error: function(xhr, type, errorThrown) {

			// 	}
			// });
			mui.plusReady(function() {
				mui.ajax('http://116.63.89.27:83/gxzy.asmx/GetUserNowState', {
					data: {
						'SchoolNo': '20191030',
						'cardNo': '1938060124',
						'isCheckCode': false
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						let res = data.d.Result;
						//console.log(res);
						let item = mui('.item');
						let bottom_item = mui('.bottom-item');
						item[0].innerHTML = bottom_item[1].innerHTML = res.InRoom; //阅览室
						item[1].innerHTML = bottom_item[2].innerHTML = res.SeatNum; //座位号
						item[2].innerHTML = res.StatusStr; //状态
						item[3].innerHTML = bottom_item[3].innerHTML = bottom_item[0].innerHTML = res
						.Time; //操作时间
						item[5].innerHTML = bottom_item[4].innerHTML = res.NowStatusRemark; //备注
						if (res.SeatNum) {
							mui('.content')[0].style.display = 'block';
						} else {
							mui('.content')[0].style.display = 'none';
						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});
			})
			mui('#order')[0].addEventListener("tap", function() {
				console.log();
				mui.openWindow({
					url: 'seat_selection.html'
				});
			});
		</script>
	</body>

</html>
